<template>
  <div class="signup">
    <my-title title="欢迎注册"></my-title>
    <my-up-form @onSubmit="onSubmit">
      <van-field
        v-model="repassword"
        left-icon="lock"
        type="password"
        name="repassword"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="rules.repassword"
      />
    </my-up-form>
  </div>
</template>

<script>
import MyTitle from '@/components/title.vue'
import MyUpForm from '@/components/UpForm.vue'
import { mapActions } from 'vuex'
import { ActionsSignUp } from '@/store/actions-type'
export default {
  name: 'signup',
  data() {
    return {
      repassword: '',
      rules: {
        repassword: [
          { required: true, message: '密码不能为空' },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/,
            message: '密码必须由字母、数字组成，区分大小写,长度为8-18位'
          }
        ]
      }
    }
  },
  methods: {
    onSubmit(value) {
      const { repassword, password, mobile } = value
      if (repassword !== password) {
        return this.$toast.fail('两次密码不一致!')
      }
      const signUpOption = {
        mobile,
        password
      }
      this[ActionsSignUp](signUpOption)
        .then(this.signUpSuccess)
        .catch(this.signUpFail)
    },
    signUpSuccess() {
      this.$toast.success('注册成功')
      this.$router.replace({ name: 'signin' })
    },
    signUpFail(err) {
      this.$toast.fail(err)
    },
    ...mapActions('user', [ActionsSignUp])
  },
  components: {
    MyTitle,
    MyUpForm
  }
}
</script>

<style lang="less" scoped></style>
